<!--  -->
<template>
    <div>
        <template class="table">
                        <el-form label-position="left" label-width="120px" class="table">
                        <el-form-item label="借阅书籍">
                            <el-col :span="12">
                            <el-autocomplete
                            class="inline-input"
                            v-model="Book"
                            :fetch-suggestions="querySearch"
                            placeholder="请输入内容"
                            @select="handleSelect"
                            ></el-autocomplete>
                           </el-col>
                        </el-form-item>
                        <el-form-item label="借阅用户">
                            <el-col :span="12">
                            <el-autocomplete
                            class="inline-input"
                            v-model="user"
                            :fetch-suggestions="querySearch1"
                            placeholder="请输入内容"
                            @select="handleSelect"
                            ></el-autocomplete>
                           </el-col>
                        </el-form-item>
                        <el-form-item label="借阅开始时间">
                           <div class="block">
                            <el-date-picker
                            v-model="ApplyStartTime"
                            type="date"
                            placeholder="选择日期">
                            </el-date-picker>
                        </div>
                        </el-form-item>
                        <el-form-item label="借阅结束时间">
                           <div class="block">
                            <el-date-picker
                            v-model="ApplyOverTime"
                            type="date"
                            placeholder="选择日期">
                            </el-date-picker>
                        </div>
                        </el-form-item>
                        <el-form-item class="button">
                        <el-button type="primary" @click="SendBorrow">立即借阅</el-button>
                        <el-button @click="clear">重置</el-button>
                        </el-form-item>
                        </el-form>
              </template>
    
    </div>
    </template>
    
    <script>

    export default {
    data() {
    return {
        Books:[],
        Users:[],
        Book:"",
        user:"",
        ApplyStartTime:'',
        ApplyOverTime:'',
    
    }
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
        this.getBook()
        this.getUser()
    },
    methods:{
        filterTime(ApplyTime) {
            // 时间戳转换
            var date = new Date(ApplyTime);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? "0" + m : m;
            var d = date.getDate();
            d = d < 10 ? "0" + d : d;
            return y + "-" + m + "-" + d;
          },
        getBook(){
            var url=`http://localhost:3000/AllBooks`
            console.log(url)
            this.axios.get(url).then(res=>{
              this.Books=res.data.results.datas
              console.log(res)
              console.log(this.Books)
            })
        },
        getUser(){
            var url=`http://localhost:3000/AllUser`
            // console.log(url)
            this.axios.get(url).then(res=>{
              this.Users=res.data.results.datas
              // console.log(res)
              // console.log(this.Users)
            })
        },
        querySearch(queryString, cb) {
            var restaurants = this.Books;
            for(let i=0;i<restaurants.length;i++){
            restaurants[i].value = restaurants[i].BookName;   
          }
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
          },
        querySearch1(queryString, cb) {
            var restaurants = this.Users;
            for(let i=0;i<restaurants.length;i++){
            restaurants[i].value = restaurants[i].uname;   
          }
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
          },
          createFilter(queryString) {
            return (restaurant) => {
              return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
            };
          },
          handleSelect(item) {
            console.log(item);
        },
        SendBorrow(){
            let Time=this.filterTime(this.ApplyStartTime)
            let Timer=this.filterTime(this.ApplyOverTime)    
            if(this.Book!==""&this.User!==""&this.ApplyStartTime!==""&this.ApplyOverTime!==""){
                var url=`http://localhost:3000/UserAddBorrow?BorrowBook=${this.Book}&BorrowUser=${this.user}&ApplyStartTime=${Time}&ApplyOverTime=${Timer}`
                // console.log(url)
                this.axios.get(url).then(res=>{
                  // console.log(res)
                //   location.reload()
                  this.clear()
                  this.open1(res.data.message)
                })
            }else{
                alert("请输入内容")
            }
        },
        clear(){
            this.Book=""
            this.user=""
            this.ApplyStartTime=""
            this.ApplyOverTime=""
        },
        open1(a) {
            this.$notify({
              title: '成功',
              message: a,
              type: 'success'
            });
          },
    }
    }
    </script>
    <style scoped>
    /* @import url(); 引入css类 */
        .table{
            margin-left: 25%;
            margin-top: 5%;
        }
        .input{
            width: 220px;
        }
      
    </style>